<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/view/include/inc.jsp"%>
<!DOCTYPE html >
<html>
<head>
<%@ include file="/WEB-INF/view/jQgrid.jsp"%>
<link href="<%=contextPath%>/static/timeline/timeline.css" rel="stylesheet">
</head>
<body style="background-color: white;" class="gray-bg">
	<div class="">
		<div class="time-line">
		<div class="left-btn"></div>
		<div class="right-btn"></div>
		<div class="time-box">
			<ul>
			<c:forEach var="list" items="${list }" varStatus="num">
			    <li <c:if test="${num.last}">class="active"</c:if>>
					<div class="point"></div>
					<h3>${list.title }</h3>
					<p>${list.content }</p>
					${list.url}
				</li>
			</c:forEach>
			</ul>
		</div>
	</div>
</div>
<script type="text/javascript">
	
	$(function() {
		
		var timeLength = $('.time-box li').length,
			timeliWidth = $('.time-box li').outerWidth();
		
		var index = 0;
		
		$('.time-box ul').width(timeLength * timeliWidth);
		
		function slideOne(i) {
			var scrollVal = i * timeliWidth; //每次切换的数量
			$('.time-box').stop().animate({
				scrollLeft: scrollVal
			}, 300);
		}
		
		$('.right-btn').click(function() {
			index = index >= (timeLength-4) ? 0 : index + 1;
			slideOne(index);
		})
		
		$('.left-btn').click(function() {
			index = index <= 0 ? (timeLength-4) : index - 1;
			slideOne(index);
		})
		
	})
	function openpage(classid,id) {
		openyem("查看详情", "<%=contextPath%>/talentsRecommend/timeLineView?classid="+classid+"&id="+id, 500, 450);
	}
</script>
</body>
</html>